<template>
  <div class="page-instore-mana">
    <el-form :inline="true" :model="linkForm" ref="linkForm">
      <el-form-item label="">
        <el-button type="primary" @click="openAddDialog">新建轮播图</el-button>
        <el-button type="primary" @click="refresh('linkForm')">刷新</el-button>
      </el-form-item>
    </el-form>
    <egrid border class="page-list"
           :data="tableData"
           :columns="columns"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps">
    </egrid>
    <pc-dialog :is-show="isShowAddDialog" title='新建轮播图' @on-close="isShowAddDialog = false">
      <div>
        <home-link-add @closeRefresh="closeRefresh">
        </home-link-add>
      </div>
    </pc-dialog>

    <pc-dialog :is-show="this.isAdditionalInformation" title='编辑轮播图'
               @on-close="isAdditionalInformation = false">
      <div>
        <home-link-add :homeLinkId="this.homeLinkId" :sort="this.sortNo" @closeRefresh="closeRefresh"
                       :isAdditionalInformation=this.isAdditionalInformation>
        </home-link-add>
      </div>
    </pc-dialog>

    <div class="pc-pagination-panel">
      <pc-pagination ref="pcPagination" :url="pageUrl.queryDataList" :queryData="linkForm"
                     @on-query="queryCallBackFn">
      </pc-pagination>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import PcPagination from 'components/form/pagination';
  import PcButton from 'components/form/button';
  import PcDialog from 'components/dialog';
  import EgridCellView from 'components/wms/comm/EgridCellView.vue';
  import homeLinkAdd from '@/views/ibs/demand/carousel/add.vue';
  let that;
  // 操作按钮
  var Btn = {
    template: `<div style="display:flex; width: 100%;flex-wrap: wrap">
        <el-button  type="danger" v-if="showHandle===1" plain @click="startHomeLinkFn(row, 1)">启用</el-button>
        <el-button  type="danger" v-if="showHandle===2" plain @click="disableHomeLinkFn(row, 2)">禁用</el-button>
        <el-button  type="danger" v-if="showHandle===1" plain @click="editHomeLinkFn(row)">编辑</el-button>
        <el-button  type="danger" v-if="showHandle===1" plain @click="deleteHomeLinkFn(row, 3)">删除</el-button>
      </div>`,
    props: ['row'],
    computed: {
      showHandle() {
        return this.row.status;
      }
    },
    methods: {
      startHomeLinkFn (val, type) {
        this.$emit('start-homeLink', val, type);
      },
      disableHomeLinkFn (val, type) {
        this.$emit('disable-homeLink', val, type);
      },
      deleteHomeLinkFn (val, type) {
        this.$emit('delete-homeLink', val, type);
      },
      editHomeLinkFn(val) {
        this.$emit('edit-homeLink', val);
      }
    }
  };
  export default {
    data () {
      return {
        statusType: 0, // 1.禁用 2.启用 3.已删除
        homeLinkId: 0,
        sortNo: 0,
        isShowAddDialog: false,
        isAdditionalInformation: false,
        isShowDetailDialog: false,
        linkForm: {},
        tableData: [],
        columns: [
          {
            label: '编号',
            prop: 'linkNo'
          },
          {
            label: '序号',
            prop: 'sort'
          },
          {
            label: '标题',
            prop: 'title'
          },
          {
            label: '创建时间',
            prop: 'createdTime'
          },
          {
            label: '操作',
            minWidth: 202,
            fixed: 'right',
            component: Btn, // 'el-button'
            listeners: {
              'disable-homeLink' (data) {
                that.disableHomeLinkFn(data, 2);
              },
              'start-homeLink' (data) {
                that.startHomeLinkFn(data, 1);
              },
              'edit-homeLink' (data) {
                that.editHomeLinkFn(data);
              },
              'delete-homeLink' (data) {
                that.deleteHomeLinkFn(data, 3);
              }
            },
            propsHandler: function ({row, col, column}) {
              return {row, col, column};
            }
          }
        ],
        columnsSchema: {
          '编号': {minWidth: 160},
          '标题': {minWidth: 200},
          '创建时间': {minWidth: 160}
        },
        // columnsProps 用于定义所有 columns 公共的属性，
        // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
        columnsProps: {
          height: 40,
          minWidth: 90,
          showOverflowTooltip: true,
          component: EgridCellView
        },
        // columnsHandler 可用于在现有的 columns 进行操作，对 columns 进行增删改，这里新增了操作列
        pageUrl: {
          queryDataList: '/ibs/web/homeLink/listLink'
        }
      };
    },
    components: {
      PcPagination, PcButton, PcDialog, homeLinkAdd
    },
    created () {
      that = this;
    },

    methods: {
      closeRefresh() {
        this.successTip('提交成功');
        this.isShowAddDialog = false;
        this.isAdditionalInformation = false;
        this.isShowDetailDialog = false;
        this.refresh('linkForm');
      },
      queryDataFn () {
        this.$refs.pcPagination.queryListWithPageFn(true);
      },
      refresh (formName) {
        this.$refs[formName].resetFields();
        this.queryDataFn();
      },
      // 表头样式
      getHeaderStyle({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background: #f5f5f5; height: 50px';
        } else {
          return '';
        }
      },
      getRowClass({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background:rgb(245, 245, 245);';
        } else {
          return '';
        }
      },
      queryCallBackFn (res) {
        this.tableData = res.result.list;
      },
      disableHomeLinkFn (scopeRow, type) {
        let param = {id: scopeRow.id, operateType: type};
        // 弹出确认对话框
        let message = '确定执行此操作吗？';
        this.confirmModel(message, '/ibs/web/homeLink/startLink', param, (response) => {
          if (response.code === 200) {
            this.successTip('提交成功', 3000);
            this.refresh('linkForm');
          } else {
            this.errorTip(response.message, 3000);
          }
        });
      },
      startHomeLinkFn (scopeRow, type) {
        let param = {id: scopeRow.id, operateType: type};
        // 弹出确认对话框
        let message = '确定执行此操作吗？';
        this.confirmModel(message, '/ibs/web/homeLink/startLink', param, (response) => {
          if (response.code === 200) {
            this.successTip('提交成功', 3000);
            this.refresh('linkForm');
          } else {
            this.errorTip(response.message, 3000);
          }
        });
      },
      deleteHomeLinkFn (scopeRow, type) {
        let param = {id: scopeRow.id, operateType: type};
        // 弹出确认对话框
        let message = '确定执行此操作吗？';
        this.confirmModel(message, '/ibs/web/homeLink/startLink', param, (response) => {
          if (response.code === 200) {
            this.successTip('提交成功', 3000);
            this.refresh('linkForm');
          } else {
            this.errorTip(response.message, 3000);
          }
        });
      },
      editHomeLinkFn (scopeRow) {
        this.homeLinkId = scopeRow.id;
        this.sortNo = scopeRow.sort;
        this.isShowAddDialog = false;
        this.isAdditionalInformation = true;
        this.isShowDetailDialog = false;
      },
      openAddDialog() {
        this.isAdditionalInformation = false;
        this.isShowAddDialog = true;
        this.isShowDetailDialog = false;
      }
    }
  };
</script>
<style>
  .page-instore-mana .el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: 146px;
    height: 146px;
    display: block;
    position: relative;
  }
</style>
